<template>
	<c-skeleton-list :data="data" :loading="loading" skeletonStyle="padding: 0">
		<view class="text-hide" :class="[containerClass || '']">
			<view
				v-for="(el, i) in data"
				:key="el.name"
				:class="getItemClass(i)"
				@click="$emit('touch', { el, index: i })"
				hover-class="opacity-80"
				hover-start-time="0"
				hover-stay-time="50"
			>
				<view class="pb-1-1" v-if="!isListItem">
					<text class="text-xn color-secondary">{{ el.name }}</text>
				</view>
				<view class="row-center">
					<view
						v-if="isListItem"
						class="mr-1-3"
						style="width:16rpx;height:16rpx;border-radius:16rpx;"
						:style="{ backgroundColor: el.color || '#4285F4' }"
					></view>
					<view class="flex-1">
						<text v-if="isListItem" class="text-xn color-secondary"> {{ el.name }} </text>
						<view
							v-else
							class="rounded-l"
							style="height: 16rpx;"
							:style="{ width: (el.value / maxValue) * 100 + '%', backgroundColor: el.color || '#4285F4' }"
						></view>
					</view>
					<view class="px-1-3 border-box ml-1-3 text-right" :style="{ width: valueWidth ? valueWidth + 'px' : 'auto' }">
						<text class="text-m color-main font-semibold" :class="['value-inner' + i]">{{ isString ? el.value : numberFormat(el.value) }}</text>
					</view>
					<view v-if="showArrow"> <text class="iconfont icon-you text-l color-secondary"></text> </view>
				</view>
			</view>
		</view>
	</c-skeleton-list>
</template>

<script>
//:style="{ width: (el.value / maxValue) * 100 + '%', backgroundColor: el.color || '#4285F4' }" :class="[i === data.length - 1 ? '' : 'mb-3-1']"
import { ref, onMounted, getCurrentInstance, watch, nextTick, onUpdated } from 'vue';
import { numberFormat } from '@/sl-uni-sdk/utils/common.js';

export default {
	props: {
		data: Array,
		isListItem: Boolean,
		showArrow: {
			default: true,
			type: Boolean,
		},
		loading: Boolean,
		containerClass: String,
		border: Boolean,
		isString: Boolean,
	},
	setup(props) {
		const { ctx } = getCurrentInstance();
		//长度最长的项的索引
		const maxItemIndex = ref(0);
		//最大的值
		const maxValue = ref(0);
		const valueWidth = ref(null);

		function findMax(data) {
			let _maxItemIndex = 0;
			let _maxValue = 0;
			let _maxWidthValue = 0;
			data.forEach((el, i) => {
				if (String(el.value).length > String(_maxWidthValue).length) {
					_maxItemIndex = i;
					_maxWidthValue = el.value;
				}
				if (el.value > _maxValue) {
					_maxValue = el.value;
				}
			});
			maxItemIndex.value = _maxItemIndex;
			maxValue.value = _maxValue;
			nextTick(() => {
				resizeValue();
			});
		}
		function resizeValue() {
			uni
				.createSelectorQuery()
				.in(ctx)
				.select('.value-inner' + maxItemIndex.value)
				.boundingClientRect((data) => {
					if (data) {
						valueWidth.value = data.width + uni.upx2px(32);
					}
				})
				.exec();
		}
		function getItemClass(i) {
			if (props.border) {
				return i === props.data.length - 1 ? 'py-2-2' : 'border-b b-color-1 py-2-2';
			} else {
				return i === props.data.length - 1 ? '' : 'mb-3-1';
			}
		}
		watch(
			() => props.data,
			(v) => {
				nextTick(() => {
					findMax(v);
				});
			},
			{
				immediate: true,
			}
		);
		onUpdated(() => {
			resizeValue();
		});
		return {
			maxValue,
			valueWidth,
			getItemClass,
			numberFormat,
		};
	},
};
</script>

<style></style>
